<template>
	<view>
		<!-- 上面的返回按钮 -->
		<view class="van-nav-bar van-hairline--bottom">
			<view class="van-nav-bar__content">
				<view class="van-nav-bar__left" @click="goBack">
					<text class="van-nav-bar__text lg text-gray cuIcon-back">返回</text>
				</view>
				<view class="van-nav-bar__title van-ellipsis">编辑地址</view>
			</view>
		</view>
		<!-- 下面的内容 -->
		<view class="van-address-edit">
			<view class="van-address-edit__fields">
				<view class="van-cell van-field">
					<view class="van-cell__title van-field__label">姓名</view>
					<view class="van-cell__value van-field__value">
						<view class="van-field__body">
							<input type="text" placeholder="收货人姓名" class="van-field__control" style="font-size: 14px;"
								v-model="form.name">
						</view>
					</view>
				</view>
				<view class="van-cell van-field">
					<view class="van-cell__title van-field__label">电话</view>
					<view class="van-cell__value van-field__value">
						<view class="van-field__body">
							<input type="text" placeholder="收货人手机号" class="van-field__control" style="font-size: 14px;"
								v-model="form.tel" @blur="validatePhone">
						</view>
					</view>
				</view>
				<view v-if="errors.tel" style="color: red;position: relative;">{{ errors.tel }}</view>
				<view class="van-cell van-cell--clickable van-field" @click="openPicker">
					<view class="van-cell__title van-field__label">地区</view>
					<view class="van-cell__value van-field__value">
						<view class="van-field__body">
							<view class="address-text">
								<text :style="{ color: !addressText ? '#ccc' : '#323233' }">
									{{ !addressText ? '请选择 省 / 市 / 区' : addressText }}
								</text>
							</view>
							<wht-picker ref="addAddress" type="linkage" v-model="selectAddress" :columns="addressData"
								:clearable="clearable" :labelKey="'name'" @confirm="onSingleConfirm" @cancel="onCancel"
								@close="onClose" :title="''">
							</wht-picker>
						</view>
					</view>
				</view>
				<view class="van-cell van-field">
					<view class="van-cell__title van-field__label">详细地址</view>
					<view class="van-cell__value van-field__value">
						<view class="van-field__body">
							<input type="text" placeholder="街道门牌、楼层房间号等信息" class="van-field__control"
								style="font-size: 14px;" v-model="form.addressDetail">
						</view>
					</view>
				</view>
				<view class=""></view>
			</view>
			<!-- 按钮 -->
			<view class="van-cell van-cell--center van-address-edit__default-address">
				<view class="van-cell__title">设为默认收货地址</view>
				<view class="switch" :class="{ active: isDefault }" @click="toggleSwitch">
					<view class="switch-circle"></view>
				</view>
			</view>
			<!-- 保存按钮 删除按钮 -->
			<view class="van-address-edit__buttons">
				<button class="van-button van-button--danger van-button--normal van-button--block van-button--round"
					@click="add">
					<view class="van-button__content">保存</view>
				</button>
				<button class="van-button van-button--default van-button--normal van-button--block van-button--round">
					<view class="van-button__content">删除</view>
				</button>
			</view>
		</view>
	</view>
</template>

<script>
import addressData from '../../static/addressData.js';
import whtPicker from '../../static/wht-picker.vue'
import api from '../../static/request.js'
export default {
	data() {
		return {
			addressData: addressData,
			// 选择的地区
			selectAddress: [],
			clearable: true,
			// 地区文字
			addressText: '',
			isDefault: false,
			form: {
				country: '',
				postalCode: ''
			},
			errors: {
				tel: ''
			}
		}
	},
	components: {
		whtPicker
	},
	methods: {
		// 返回上一页
		goBack() {
			uni.navigateBack()
		},
		// 选择地区
		onSingleConfirm(value) {
			console.log('确认选择:', value);
			if (value && value.items) {
				const items = value.items;
				this.addressText = items.map(item => item.name).join(' ');
				this.form.province = items[0]?.name || '';
				this.form.city = items[1]?.name || '';
				this.form.county = items[2]?.name || '';
				this.form.areaCode = items[2]?.value || '';
			}
		},
		// 打开多列选择器
		openPicker() {
			console.log('aaaaaaa');
			if (this.clearable) {
				this.$refs.addAddress.open()
				this.clearable = !this.clearable
			} else {
				this.$refs.addAddress.close()
				this.clearable = !this.clearable
			}
		},
		// 切换开关
		toggleSwitch() {
			this.isDefault = !this.isDefault
			this.form.isDefault = this.isDefault
		},
		// 添加地址
		add() {
			if (this.errors.tel == '请输入有效的手机号') {
				return false
			} else {
				api.post('address/save', this.form).then(res => {
					console.log(res, '添加地址');
					uni.navigateTo({
						url: '/pages/address/address'
					})
				})
			}

		},
		validatePhone() {
			const phoneRegex = /^1[3-9]\d{9}$/;
			if (!phoneRegex.test(this.form.tel)) {
				this.errors.tel = '请输入有效的手机号';
			} else {
				this.errors.tel = '';

			}
		},
		// 添加取消方法
		onCancel() {
			console.log('取消选择');
		},
		// 添加关闭回调
		onClose() {
			console.log('picker已关闭');
		}
	},
	watch: {
		// 监听picker的显示状态
		'clearable': {
			handler(newVal) {
				if (newVal) {
					this.$refs.addAddress?.close();
				}
			}
		}
	},
	onLoad() {
		console.log(addressData, '地区数据')
	}
}
</script>

<style scoped>
@import url('category.css');
@import url('edit.css');

/* 修改地址选择文字样式 */
.address-text {
	position: relative;
	width: 100%;
	height: 24px;
	line-height: 24px;
	font-size: 14px;
}

/* 未选择状态的文字样式（灰色） */
.address-text text[v-if] {
	color: #ccc;
}

/* 选中后的文字样式（黑色） */
.address-text text[v-else] {
	color: #323233;
}

.address-text text {
	display: block;
	width: 100%;
}
</style>
